<template>
    <div class="nav-bar">
        <span class="logo">
            <span style="color: #ffcf3f;">Ananas</span>
            <span style="color: #66d476;"> UI</span>
        </span>
        <div class="nav-list">
            <router-link to="/ananas" class="nav-item">首页</router-link>
            <router-link to="/fast" class="nav-item">文档</router-link>
            <router-link to="/" class="nav-item">关于</router-link>
            <router-link to="/" class="nav-item">Github</router-link>
        </div>
    </div>
</template>
<script setup>
</script>

<style scoped>
.nav-bar {
    height: 60px;
    background-color: #fff;
    box-shadow: 0 1px 4px #00000014;
    position: relative;
}

.logo {
    position: absolute;
    top: 50%;
    left: 10%;
    transform: translate(-50%, -50%);
    font-size: 1.7rem;
    font-weight: 600;
    cursor: pointer;
}

.nav-list {
    position: absolute;
    top: 50%;
    right: 5%;
    transform: translateY(-50%);
    display: flex;
    font-size: 14px;
    font-weight: 600;
    color: #333;
}

.nav-item {
    text-decoration: none;
    color: #333;
    padding: 0 20px;
    transition: all 0.3s;
    cursor: pointer;

    &:checked {
        color: #ffcf3f;
    }
}
</style>